<!-- 查看试卷 -->
<template>
  <div>
    <div class="header-container">
      <span class="title">试题评阅详情</span>
      <span class="title">
        {{ Data.PageInfo.kmdm }}({{ Data.PageInfo?.kmmc }}):{{ Data.reviewInfo?.tmbh }}
      </span>
      <span class="title !text-red-600">科目评阅状态</span>
      <span class="title !text-red-600">{{ statusEnum[Data.PageInfo?.kmpyjd] || '--' }}</span>
      <span class="flex"></span>
      <a-button class="label" type="warning" @click="Data.restoreVisible = 'YJ'">
        <retweet-outlined class="mr-1" /> 调阅原卷
      </a-button>
      <a-button class="label" type="primary" @click="Data.restoreVisible = 'DTK'">
        <retweet-outlined class="mr-1" /> 调阅答题卡
      </a-button>
      <a-button type="success" class="label" @click="showResult">
        <eye-outlined class="mr-1" /> 查看答案
      </a-button>
      <a-button type="primary" class="label" @click="pageGoBack">返回</a-button>
    </div>

    <div class="container-wrap">
      <div class="main">
        <canvas-container
          :prpopsStyle="{
            width: '100%',
            height: '100%',
          }"
          :imgList="Data.reviewInfo?.dtkqtxxVoList"
          :tagsList="Data.tagsList"
        >
          <template #standardmodule="{ scale, imgInfo }" v-if="isJdCorrectType(Data.reviewInfo)">
            <standard-modeule
              :scale="scale"
              :imgInfo="imgInfo"
              :result="Data.dtkType || []"
              :pyZycKgtList="Data.pyZycKgtList"
              :reviewShowInfo="Data.reviewShowInfo"
            />
          </template>
        </canvas-container>
      </div>
      <div class="right">
        <functional-zone
          :reviewInfo="Data.reviewInfo"
          :pageInfo="Data.PageInfo"
          ref="functionalZoneRef"
          @historyTagIdlist="historyTagIdlist"
        >
          <template #buttonlist="{ fpFlag }">
            <div class="bar-header-title">
              <a-button
                :disabled="
                  $route.query.pyJd !== Data.PageInfo?.kmpyjd ||
                  Data.PageInfo.ycZt == 'YC_YCL' ||
                  (Data.PageInfo.ycZt == 'YC_CLZ' &&
                    (userInfo.accountType == 'PYJS' ||
                      Data.PageInfo.confirmYcAction !== 'YZB' ||
                      !!Data.PageInfo.adminActionTime))
                "
                :loading="Data.butLoading"
                @click="handelClick('CP_SOURCE')"
              >
                <rollback-outlined />
                {{ ycActionList?.find(e => e.dictCode == 'CP_SOURCE')?.label }}
              </a-button>
              <a-button
                @click="handelClick('YZB')"
                :disabled="
                  $route.query.pyJd !== Data.PageInfo?.kmpyjd ||
                  userInfo.accountType == 'ADMIN' ||
                  Data.PageInfo.ycZt == 'YC_YCL' ||
                  (Data.PageInfo.ycZt == 'YC_CLZ' && userInfo.accountType == 'PYJS')
                "
                :loading="Data.butLoading"
              >
                <user-outlined />
                {{ ycActionList?.find(e => e.dictCode == 'YZB')?.label }}
              </a-button>

              <a-button
                @click="handelClick('CP_POINT')"
                :disabled="
                  $route.query.pyJd !== Data.PageInfo?.kmpyjd ||
                  Data.reviewInfo.pySzJsfpList?.length < 2 ||
                  Data.PageInfo.ycSource == 'SQCP' ||
                  fpFlag ||
                  Data.PageInfo.ycZt == 'YC_YCL' ||
                  (Data.PageInfo.ycZt == 'YC_CLZ' &&
                    (userInfo.accountType == 'PYJS' ||
                      Data.PageInfo.confirmYcAction !== 'YZB' ||
                      !!Data.PageInfo.adminActionTime))
                "
                :loading="Data.butLoading"
              >
                <team-outlined />
                {{ ycActionList?.find(e => e.dictCode == 'CP_POINT')?.label }}
              </a-button>

              <a-button
                danger
                @click="handelClick('WGWJWF')"
                v-if="userInfo.accountType == 'ADMIN'"
                :disabled="
                  $route.query.pyJd !== Data.PageInfo?.kmpyjd ||
                  Data.PageInfo.ycZt == 'YC_YCL' ||
                  (Data.PageInfo.ycZt == 'YC_CLZ' &&
                    (userInfo.accountType == 'PYJS' ||
                      Data.PageInfo.confirmYcAction !== 'YZB' ||
                      !!Data.PageInfo.adminActionTime))
                "
              >
                <ExclamationCircleOutlined />
                违纪违规违法
              </a-button>

              <a-button
                type="success"
                :disabled="
                  $route.query.pyJd !== Data.PageInfo?.kmpyjd ||
                  Data.PageInfo.ycZt == 'YC_YCL' ||
                  (Data.PageInfo.ycZt == 'YC_CLZ' &&
                    (userInfo.accountType == 'PYJS' ||
                      Data.PageInfo.confirmYcAction !== 'YZB' ||
                      !!Data.PageInfo.adminActionTime))
                "
                @click="handelClick('REVIEWCORRECT')"
                :loading="Data.butLoading"
              >
                <check-circle-filled />
                {{ ycActionList?.find(e => e.dictCode == 'WYC')?.label }}
              </a-button>
            </div>
          </template>
        </functional-zone>
      </div>
    </div>
    <!--试卷答案 -->
    <answer-modal v-model:ckd-uvisible="Data.ckdUvisible" :currentTopic="Data.reviewInfo" />

    <!-- 答题卡还原 -->
    <restore-card
      v-model:restoreVisible="Data.restoreVisible"
      :kmdm="Data.PageInfo?.kmdm"
      :pyZycId="Data.PageInfo?.pyZycId"
    />

    <!-- 选择教师 -->
    <sele-teacher-modal
      v-model:abnormalVisible="Data.abnormalVisible"
      :pySzJsfpList="
        Data.reviewInfo.pySzJsfpList?.filter(item => item.account !== Data.PageInfo.sourcePyAccount)
      "
      @success="dimensionType"
    />

    <!-- 0分处理弹窗 -->
    <ycwgwjwfPopes v-model:wgwjwfVisible="Data.wgwjwfVisible" @success="confirmViolation" />
  </div>
</template>

<script setup tang="ts">
import { ref, onMounted, computed, h, reactive } from 'vue'
import aCheckbox from 'ant-design-vue/es/checkbox'
import { useRouter, useRoute } from 'vue-router'
import { useMessage } from '/@/hooks/web/useMessage'
import { useUserStore } from '/@/store/modules/user'

import { ycActionList } from '/@/views/examination-audit/abnormal-examination-paper/components/index'

import { isJdCorrectType } from '/@/views/examination-audit/abnormal-teacher/index'

import { YcAction } from '/@/views/exam-info/review-paper/components/index'

import seleTeacherModal from '/@/views/exam-info/review-paper/components/seleTeacher.vue'
import ycwgwjwfPopes from '/@/views/exam-info/review-paper/components/ycwgwjwfPopes.vue'
import functionalZone from '/@/views/exam-info/review-paper/components/functionalZone.vue'
import answerModal from '/@/views/teacher/review/components/answer.vue'
import CanvasContainer from '/@/layouts/components/CanvasChart/canvasContainer.vue'
import restoreCard from '/@/views/teacher/review/restoreCard.vue'
import standardModeule from '/@/views/teacher/choice/components/standardModeule.vue'

import {
  getPictureAndDfdByKmAndStId,
  getZycwatchPaperCheck,
  getDtkTypeByPyZycId,
} from '/@/api/teacher'
import { excepTaglabelPaper, setYcwgwjwf } from '/@/api/examineGrade'
import { getYcDetail, getAcountmdm } from '/@/api/examinationAudit'

import { statusEnum } from '/@/enums/privateEnums'

const userStore = useUserStore()
const userInfo = computed(() => userStore.getUserInfo)
const authorityInfo = computed(() => userStore.getAuthorityItem)
const { createConfirm, createMessage } = useMessage()
const router = useRouter()
const route = useRoute()
const arrowAngle = ref(180)

const _updateId = computed(() => new Date().getTime())
const examPagerIndex = ref(0)

const Data = reactive({
  ckdUvisible: false, // 试卷答案
  abnormalVisible: false, // 选择教师
  wgwjwfVisible: false, // 0分处理弹窗
  reviewInfo: {}, // 评阅明细
  tagsList: [], // 打分坐标
  PageInfo: {}, // 试卷信息
  butLoading: false, // 按钮加载
  restoreVisible: '', // 还原试卷
  pyZycKgtList: [],
  dtkType: [],
  reviewShowInfo: {},
})

// 查看答案
function showResult() {
  Data.ckdUvisible = true
}
// 获取试卷答案

// 获取评卷数据
// TODO:调试
const getAppraisePaperData = async () => {
  try {
    const { data, code } = await getZycwatchPaperCheck({
      pyZycId: Data.PageInfo.pyZycId,
      stId: Data.PageInfo.stId,
      kmdm: Data.PageInfo.kmdm,
    })
    if (code == 200) {
      Data.reviewInfo = data
    }
  } catch (error) {
    console.error(error)
  }
}

function historyTagIdlist(e) {
  Data.pyZycKgtList = e.pyZycKgtList
  Data.dtkType = e.dtkType
  Data.tagsList = e.tagsList
  Data.reviewShowInfo = e.reviewShowInfo
}

function pageGoBack() {
  router.go(-1)
}

// 异常处理事件
async function handelClick(operationType) {
  let operaType = operationType

  let conFirmMess = createConfirm({
    iconType: 'warning',
    title: () => h('span', '温馨提醒'),
    content: () =>
      h('div', null, [
        h(
          'div',
          {
            style: {
              color: '#333',
            },
          },
          YcAction[operaType]
        ),
        h(
          aCheckbox,
          {
            onChange: e => {
              conFirmMess.update({
                okButtonProps: {
                  disabled: !e.target.checked,
                  title: e.target.checked ? '我已阅读并了解' : '勾选确认后才可操作',
                },
              })
            },
            style: {
              position: 'absolute',
              bottom: '30px',
              left: '24px',
            },
          },
          '我已阅读并了解'
        ),
      ]),
    okButtonProps: {
      disabled: true,
      title: '勾选确认后才可操作',
    },
    onOk: () => {
      if (operaType == 'WGWJWF') {
        Data.wgwjwfVisible = true
        return
      }
      if (operaType == 'CP_POINT') {
        // 其他老师重评
        Data.abnormalVisible = true
      } else {
        if (operaType == 'REVIEWCORRECT')
          if (Data.PageInfo.ycSource == 'SQCP' || Data.PageInfo.ycSource == 'ZJ') {
            operaType = 'WYC'
          } else {
            operaType = 'ZYC'
          }
        dimensionType(operaType)
      }
    },
  })
}

const functionalZoneRef = ref(null)

//异常证实提交
async function dimensionType(confirmYcAction, pointPyAccount = undefined) {
  if (Data.butLoading) return
  Data.butLoading = true
  try {
    const { code, message } = await excepTaglabelPaper({
      pointPyAccount,
      pyZycId: Data.PageInfo.pyZycId,
      confirmYcAction, //YZB("上报系统管理员"),  CP_POINT("重评-指定老师(不含原评阅教师)"),  CP_SOURCE("重评-原评阅教师"), ZYC("退回资源池"), WYC("无异常(重评申请拒绝，系统异常判断无异常)"),
      ycId: Data.PageInfo.ycId,
    })
    if (code == 200) {
      createMessage.info('操作成功')
      Data.PageInfo.confirmYcFlag = true
      if (confirmYcAction == 'YZB') {
        Data.PageInfo.ycZt = 'YC_CLZ'
      } else {
        Data.PageInfo.ycZt = 'YC_YCL'
      }
      functionalZoneRef.value?.getYcListRecord && functionalZoneRef.value?.getYcListRecord()
    } else {
      createMessage.error(message)
    }
  } catch (error) {}
  Data.butLoading = false
}

/**
 * 违规违纪违法确认
 */
async function confirmViolation(czfa = {}) {
  const { code, message } = await setYcwgwjwf({
    ycId: Data.PageInfo.ycId,
    ...czfa,
  })
  if (code == 200) {
    createMessage.info('操作成功')
    Data.PageInfo.confirmYcFlag = true
    Data.PageInfo.ycZt = 'YC_YCL'
    functionalZoneRef.value?.getYcListRecord && functionalZoneRef.value?.getYcListRecord()
  } else {
    createMessage.error(message)
  }
}

async function getPageInfoFun() {
  const { data, code } = await getYcDetail({
    ycId: route.query.ycId,
  })
  if (code == 200) {
    Data.PageInfo = data
    getKmpyJd(Data.PageInfo.kmdm)
    getAppraisePaperData()
  }
}

async function getKmpyJd(kmdm) {
  if (!kmdm || kmdm === '0') return
  const { code, data } = await getAcountmdm({ kmdm })
  if (code == 200) {
    Data.PageInfo.kmpyjd = data.kmpyjd
  }
}

onMounted(async () => {
  getPageInfoFun()
})
</script>

<style lang="less" scoped>
.header-container {
  width: 100%;
  height: 50px;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0 20px 5px 20px;

  .title {
    font-size: 18px;
    font-weight: bold;
    color: #3f4355;
    margin-right: 20px;
  }

  .label {
    cursor: pointer;
    margin-right: 16px;
    margin-left: 5px;
    font-weight: 700;
  }
}

.container-wrap {
  display: flex;
  flex-direction: row;
  height: calc(100vh - 130px);

  .right {
    width: calc(35% - 20px);
    background: #fff;
    border-radius: 5px;
    height: 100%;
    .bar-header-title {
      min-height: 50px;
      width: 100%;
      padding: 10px 20px 5px;
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      align-items: center;
      border-bottom: 1px solid #ccc;
      .ant-btn {
        padding: 0 5px;
        margin: 0 5px 5px 0;
      }
    }
  }

  .main {
    display: flex;
    flex-direction: row;
    width: 65%;
    background-color: #fff;
    margin-right: 25px;
    border-radius: 5px;
  }
}
</style>
